import React, { useCallback, useMemo } from "react"
import Select from "@/components/customSelect"
import { useRecoilValue } from 'recoil'
import { homeState } from '@/store'
import { useHomeContext } from '@/pages/home/useHomeContext'
import { useLoader } from '@/components/loading'

import styles from './styles.module.css';

const filterInfo = [
    {
        placeholder: '区域选择',
        title: '区域',
        options: [
            { value: '高新开发区', label: '高新开发区' },
            { value: '花桥开发区', label: '花桥开发区' },
            { value: '玉山镇', label: '玉山镇' },
            { value: '巴城镇', label: '巴城镇' },
            { value: '周氏镇', label: '周氏镇' },
            { value: '陆家镇', label: '陆家镇' },
            { value: '张浦镇', label: '张浦镇' },
            { value: '周庄镇', label: '周庄镇' },
            { value: '千灯镇', label: '千灯镇' },
            { value: '淀山湖区', label: '淀山湖区' },
        ],
        type: 'areaMenu',
        filterKey: 'region',
    },
    {
        placeholder: '梯龄选择',
        title: '梯龄',
        options: [
            { value: '0-6', label: '0～6年' },
            { value: '6-10', label: '6～10年' },
            { value: '10-15', label: '10～15年' },
            { value: '15-1000', label: '15年以上' },
        ],
        type: 'elevatorAge',
        filterKey: 'deviceAge',
    },
    {
        placeholder: '用途选择',
        title: '用途',
        options: [
            { value: '乘客电梯', label: '乘客电梯' },
            { value: '载货电梯', label: '载货电梯' },
            { value: '自动扶梯', label: '自动扶梯' },
            { value: '自动人行道', label: '自动人行道' },
            { value: '病床电梯', label: '病床电梯' },
        ],
        type: 'elevatorType',
        filterKey: 'deviceClass',
    },
    {
        placeholder: '场所选择',
        title: '场所',
        options: [
            { value: '住宅', label: '住宅' },
            { value: '办公楼宇', label: '办公楼宇' },
            { value: '商场超市', label: '商场超市' },
            { value: '宾馆饭店', label: '宾馆饭店' },
            { value: '交通场所', label: '交通场所' },
            { value: '医院', label: '医院' },
            { value: '学校', label: '学校' },
            { value: '文娱场所', label: '文娱场所' },
            { value: '其它', label: '其它' },
        ],
        type: 'elevatorLocation',
        filterKey: 'suitablePlace',
    },
]

const MapOverlay = () => {
    const { homeData } = useRecoilValue(homeState);
    const {homeContext, setHomeContext} = useHomeContext();
    const {setLoading} = useLoader();
    const summaryInfo = useMemo(() => {
        if (homeData?.topFirstDiv) {
            const {
                elevatorTotal,
                faultTodayAmount,
                onlineAmount,
                rescuePersonnelAmount
            } = homeData.topFirstDiv;

            return (
                [
                    { count: elevatorTotal, label: '电梯总数', type: 'normal' },
                    { count: onlineAmount, label: '在线运行数', type: 'running' },
                    { count: faultTodayAmount, label: '当日故障数', type: 'malfunction' },
                    { count: rescuePersonnelAmount, label: '解救困人总数', type: 'normal' }
                ])
        }
        return []
    }, [homeData?.topFirstDiv])

    const subSummaryInfo = useMemo(() => {
        if (homeData?.topSecondDiv) {
            const {
                appendElevatorAmount,
                enterpriseAccessAmount,
                maintenancePartyTotal,
                onlineDeviceAmount,
                trapProbability,
            } = homeData.topSecondDiv;

            return (
                [
                    { count: appendElevatorAmount, label: '新增电梯数' },
                    { count: enterpriseAccessAmount, label: '企业接入数' },
                    { count: onlineDeviceAmount, label: '设备在线率' },
                    { count: maintenancePartyTotal, label: '维保企业总数' },
                    { count: trapProbability, label: '万台困人率' }
                ])
        }
        return []
    }, [homeData?.topSecondDiv])

    const dayInfo = useMemo(() => {
        if (homeData?.topLeftDiv) {
            const {
                dealTodayAmount,
                faultDeviceTodayAmount,
                pendingTodayAmount,
                warnTodayAmount,
            } = homeData.topLeftDiv;

            return (
                [
                    { count: faultDeviceTodayAmount, label: '当日电梯故障数' },
                    { count: dealTodayAmount, label: '当日处理数' },
                    { count: warnTodayAmount, label: '当日报警数' },
                    { count: pendingTodayAmount, label: '当日待维保' },
                ])
        }
        return []
    }, [homeData?.topLeftDiv])

    const changeHomeContext = useCallback((type: string, value: boolean) => {
        const markerCategories = {
            ...homeContext?.homeData?.markerCategories,
            [type]: value
        }
        setHomeContext({
            homeData: {
                ...homeContext?.homeData,
                markerCategories: {
                    running: !!markerCategories.running,
                    warning: !!markerCategories.warning,
                    inMaintenance: !!markerCategories.inMaintenance,
                    rescueSite: !!markerCategories.rescueSite,
                    rescuedToday: !!markerCategories.rescuedToday
                }
            }
        })
    }, [homeContext?.homeData])

    const listBarInfo = useMemo(() => {
        const markerCategories = homeContext?.homeData?.markerCategories;
        if (homeData?.bottomRightDiv) {
            const {
                rescueStation,
                rescuedIndividuals,
                runDeviceAmount,
                servicingDeviceAmount,
                warnDeviceAmount
            } = homeData.bottomRightDiv;

            return (
                [
                    {
                        count: runDeviceAmount,
                        label: '运行电梯',
                        type: 'running',
                        checked: !!markerCategories?.running,
                        onClick: () => changeHomeContext('running', !markerCategories?.running)
                    },
                    {
                        count: warnDeviceAmount,
                        label: '告警电梯',
                        type: 'warning',
                        checked: !!markerCategories?.warning,
                        onClick: () => changeHomeContext('warning', !markerCategories?.warning)
                    },
                    {
                        count: servicingDeviceAmount,
                        label: '维修中',
                        type: 'inMaintenance',
                        checked: !!markerCategories?.inMaintenance,
                        onClick: () => changeHomeContext('inMaintenance', !markerCategories?.inMaintenance)
                    },
                    {
                        count: rescueStation,
                        label: '救援站点',
                        type: 'rescueSite',
                        checked: !!markerCategories?.rescueSite,
                        onClick: () => changeHomeContext('rescueSite', !markerCategories?.rescueSite)
                    },
                    {
                        count: rescuedIndividuals,
                        label: '今日已救援',
                        type: 'rescuedToday',
                        checked: !!markerCategories?.rescuedToday,
                        onClick: () => changeHomeContext('rescuedToday', !markerCategories?.rescuedToday)
                    }
                ])
        }
        return []
    }, [homeData?.bottomRightDiv, homeContext?.homeData?.markerCategories])

    const filterChange = () => {
        setLoading(true);

        setTimeout(() => {
            setLoading(false);
        }, 1000)
    }
  
    return (
        <React.Fragment>
            <div className={styles.summaryInfo}>
                <div className={styles.summaryInfoHeader}>
                    {
                        summaryInfo.map(({ count, label, type }) => {
                            return (
                                <div
                                    key={label}
                                    className={styles.summaryInfoHeaderItem}
                                    data-type={type}
                                >
                                    <p className={styles.summaryInfoHeaderCount}>{count}</p>
                                    <p className={styles.summaryInfoHeaderLabel}>{label}</p>
                                </div>
                            )
                        })
                    }
                </div>
                <div className={styles.summaryInfoMainSubHeader}>
                    {subSummaryInfo.map(({ count, label }) => {
                        return (<div key={label} className={styles.summaryInfoMainSubHeaderItem}>
                            <div className={styles.summaryInfoMainSubHeaderIcon}></div>
                            <div className={styles.summaryInfoMainSubHeaderInfoWrapper}>
                                <p className={styles.summaryInfoMainSubHeaderLabel}>{label}</p>
                                <p className={styles.summaryInfoMainSubHeaderCount}>{count}</p>
                            </div>
                        </div>)
                    })}
                </div>
            </div>
            <div className={styles.dayInfo}>
                {dayInfo.map(({ count, label }) => {
                    return (
                        <div key={label} className={styles.dayInfoItem}>
                            <div className={styles.dayInfoItemCount}>{count}<span>台</span></div>
                            <p className={styles.dayInfoItemLablel}>{label}</p>
                        </div>)
                })}
            </div>
            <div className={styles.filterInfo}>
                {filterInfo.map(({ title, placeholder, options, type }) => {
                    return (
                        <Select
                            key={title}
                            placeholder={placeholder}
                            options={options}
                            type={type}
                            onChange={filterChange}
                        />
                    )
                })}
            </div>
            <div className={styles.listBar}>
                {
                    listBarInfo.map(({ label, count, type, checked, onClick }) => (
                        <div className={styles.listBarItem} key={label} data-type={type} data-checked={checked} onClick={onClick}>
                            <div className={styles.listBarIcon}></div>
                            <div className={styles.listBarContent}>
                                <div className={styles.listBarContentLabel}>{label}</div>
                                <div className={styles.listBarContentCount}>{count}</div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </React.Fragment>
    )
}

export default MapOverlay;